<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Bootstrap -->
<!-- <link href="css/bootstrap.css" rel="stylesheet" media="screen"> -->
<!-- Common style -->
<link href="css/commons.css" rel="stylesheet" media="screen"/>
<!-- jquery easy ui -->
<link rel="stylesheet" type="text/css"
	href="css/jqeasyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css"
	href="css/jqeasyui/themes/icon.css"/>
<script type="text/javascript" src="css/jqeasyui/jquery.min.js"></script>
<script type="text/javascript" src="css/jqeasyui/jquery.easyui.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="header">header</div>
	<div class="easyui-layout border ">
		<div region="west" split="false"
			style="width: 201px; border-right: solid #95b8e7 1px;"
			data-options="collapsible:false,border:false">
			<ul id="portal">
			</ul>
		</div>
		<div id="content" region="center" data-options="border:false"
			class="easyui-tabs"></div>
	</div>
	<div class="footer">footer</div>
</body>
<script type="text/javascript">
/*<![CDATA[*/
	$(function(){
		function addTab(title, url) {
			if ($('#content').tabs('exists', title)) {
				$('#content').tabs('select', title);
			} else {
				var content = '<iframe scrolling="auto" frameborder="0" src="'
						+ url + '" style="width:100%;height: 99.5%;"></iframe>';
				$('#content').tabs('add', {
					title : title,
					content : content,
					closable : true,
				});
			}
		}
		$("#portal").tree({
			url : 'getportal',
			loadFilter : function(data) {
				debugger;
				return data;
			},
			onClick:function(node){
				if(!node.state){
					addTab(node.text,node.attributes);
				}
			}
		});
	});
/*]]>*/
</script>
</html>